<template>
  <Modal v-model="modal" fullscreen :title="title" width="800" class-name='fullscreen-modal'>
    <div class="ower-change-modal scroll">
      <Row class='search'>
        <div><span class="name">省份：</span> <AreaSelect style="width: 200px" :onlyProvince="true" @input="onSelectChange"  /></div>
        <div><span class="name">经销商：</span> <SelectList style="width: 200px" ref="dealerList" listType="dealerList"  @input="onSelectDealer"  /></div>
        <div><span class="name">品牌：</span>
          <CheckboxGroup v-model="resignBrand" @on-change='onSelectBrand'>
            <Checkbox v-for="item in brandList" :key="item.currentBrandId" :label="item">{{item.currentBrandName}}</Checkbox>
          </CheckboxGroup>
        </div>
      </Row>
      <Row class='search'>
        <div><span class="name">变更人：</span><SelectList style="width: 200px" v-model="leftRoleId" @input="onChange($event, 'left')" listType="selfList" :selfList='roleListLeft' /></div>
        <div><span class="name">给与人：</span><SelectList style="width: 200px" v-model="rightRoleId" @input="onChange($event, 'right')" listType="selfList" :selfList='roleListRight'/></div>
        <div></div>
      </Row>
      <Row  class='search storeWrap'>
        <ul class="storeList">
          <li class='bg-light'> 
            <Checkbox v-model='isSelectAll' @on-change="onSelectAll">全选</Checkbox> 
            <h3>变更人所维护门店</h3><span></span>
          </li>
          <li><span></span><span>门店名称</span><span>门头编号</span><span>店主姓名</span></li>
          <li
            v-for='(item, idx) in changeListNotSelect'
            :key='item.id'
            @click='onSelectItem(item, idx)'
          >
            <span><Checkbox v-model='item.checked' /></span>
            <span>{{item.storeName}}</span>
            <span>{{item.storeNo}}</span>
            <span>{{item.ownerName}}</span>
          </li>
          <li v-if='!changeListNotSelect.length'>暂无数据！</li>
          
        </ul>
        
        <ul class="storeList">
          <li class='bg-light'><span></span><h3>给予人所维护门店</h3><span></span></li>
          <li><span></span><span>门店名称</span><span>门头编号</span><span>店主姓名</span></li>
          <li
            v-for='(item, idx) in hasListWithSelect'
            :key='item.id'
            @click='onCancelSelectItem(item)'
          >
            <span><Checkbox readonly v-model='item.checked' v-show='!item.ower' /></span>
            <span>{{item.storeName}}</span>
            <span>{{item.storeNo}}</span>
            <span>{{item.ownerName}}</span>
          </li>
          <li v-if='!hasListWithSelect.length'>暂无数据！</li>
          
        </ul>
      </Row>
      <Row  class='search'>
        <div class="pager">
            <Page
            :total="pages.leftTotal"
            :current="pages.leftCur"
            :page-size="pages.leftSize"
            @on-change="onPageChange($event, 'left')"
            @on-page-size-change="onPageSizeChange($event, 'left')"
            show-sizer
            placement="top"></Page>
          </div>
        <div class="pager">
          <Page
            :total="pages.rightTotal"
            :current="pages.rightCur"
            :page-size="pages.rightSize"
            @on-change="onPageChange($event, 'right')"
            @on-page-size-change="onPageSizeChange($event, 'right')"
            show-sizer
            placement="top"></Page>
        </div>
      </Row>
      <Loader :status="status"></Loader>
    </div>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text">取消</Button>
        <Button @click="onSave" type="primary" size="large">确认</Button>
    </div>
</Modal>
</template>
<script>
import AreaSelect from "~/AreaSelect";
import SelectList from "~/SelectList";
export default {
  components: {
    AreaSelect,
    SelectList
  },
  data() {
    return {
      id: null,
      modal: false,
      title: '维护人变更',
      pages: {
        leftCur: 1,
        leftSize: 20,
        leftTotal: 0,
        rightCur: 1,
        rightSize: 20,
        rightTotal: 0,
      },
      resignBrand: [],
      brandList: [],
      roleList: [],
      distributorId: '',
      changeList: [],
      hasList: [],
      loading: false,
      isSelectAll: false,
      leftRoleId: '',
      rightRoleId: '',
      status: 'pass'
    };
  },
  computed: {
    roleListLeft() {
      return this.roleList.map(item => {
        return { ...item, disabled: item.salesmanId == this.rightRoleId }
      })
    },
    roleListRight() {
      return this.roleList.map(item => {
        return { ...item, disabled: item.salesmanId == this.leftRoleId }
      })
    },
    changeListNotSelect() {
      return this.changeList.filter(e => !e.checked)
    },
    hasListWithSelect() {
      return this.hasList.concat(this.changeList.filter(e => e.checked))
    }
  },
  methods: {
    onSave() {
      if (!this.hasListWithSelect.length) return
      let ids = this.hasListWithSelect.map(item => item.id)
      let role = this.roleList.find(item => item.salesmanId == this.rightRoleId)
      let params = {
        contractIdList: ids,
        salesmanId: role.salesmanId,
        salesmanName: role.realname
      }
      this.$jsonPost('/contract_store/change_salesman', params).then(res => {
        this.$Message.success('更改成功')
        this.closeModal()
      })
    },
    onChange(val, t) {
      if (t == 'left') {
        this.pages.leftCur = 1
        this.getLeftStore()
      } else {
        this.pages.rightCur = 1
        this.getRightStore()
      }
    },
    onPageChange(p, t) {
      if (t == 'left') {
        this.pages.leftCur = p
        this.getLeftStore()
      } else {
        this.pages.rightCur = p
        this.getRightStore()
      }
    },
    onPageSizeChange(p, t) {
      if (t == 'left') {
        this.pages.leftCur = 1
        this.pages.leftSize = p
        this.getLeftStore()
      } else {
        this.pages.rightCur = 1
        this.pages.rightSize = p
        this.getRightStore()
      }
    },
    getLeftStore() {
      if(!this.leftRoleId) {
        this.changeList = []
        this.pages.leftTotal = 0
        return
      }
      let params = { salesmanId: this.leftRoleId, distributorId: this.distributorId , current: this.pages.leftCur, size: this.pages.leftSize}
      this.$jsonPost('/contract_store/page', params).then(res => {
        this.pages.leftTotal = Number(res.total)
        this.changeList = res.records || []
      })
    },
    getRightStore() {
      if(!this.rightRoleId) {
        this.hasList = []
        this.pages.rightTotal = 0
        return
      }
      let params = { salesmanId: this.rightRoleId, distributorId: this.distributorId , current: this.pages.rightCur, size: this.pages.rightSize}
      this.$jsonPost('/contract_store/page', params).then(res => {
        this.pages.rightTotal = Number(res.total)
        this.hasList = res.records || []
      })
    },
    onSelectBrand() {
      this.getRoleList()
    },
    onSelectDealer(val){
      this.distributorId = val
      this.resignBrand = []
      if(!val) return
      this.$ajaxGet('/distributor/contract/getContractBrands', { distributorId: val }).then(res => {
        this.brandList = res
      })
      this.getRoleList()
    },
    getRoleList() {
      this.status = 'loading'
      let arr = this.resignBrand.map(item => item.currentBrandId)
      this.$ajaxGet('/distributor_salesman/listSalesman', { distributorId : this.distributorId, brandIdList: arr }).then(res => {
        let arr = []
        res.forEach(item => {
          item.value = item.salesmanId
          item.text = item.realname
          if (!arr.find(a => a.salesmanId === item.salesmanId)) {
            arr.push({ ...item })
          }
        })
        this.roleList = arr
        this.status = 'pass'
      }).catch(()=> {
        this.status = 'pass'
      })
    },
    onSelectChange(val) {
      let obj = {
        current: 1,
        size: 1000,
        provinceId: val
      }
      this.$refs.dealerList.getListDispath('getDealerList', obj)
    },
    onSelectItem(item){
      if(!this.rightRoleId) {
        this.$Message.info('请选择给与人')
        return
      }
      let idx = this.changeList.findIndex(e => e.id === item.id);
      item.checked = true
      this.$set(this.changeList, idx, item);
    },
    onSelectAll(val) {
      if (val) {
        if(!this.rightRoleId) {
          this.isSelectAll = false
          this.$Message.info('请选择给与人')
          return
        }
        this.changeList = this.changeList.map(item => {
          item.checked = true;
          return item;
        })
      }
    },
    onCancelSelectItem(item) {
      this.isSelectAll = false;
      item.checked = false;
      this.changeList = this.changeList.map(e => {
        if (e.id === item.id) return item;
        return e;
      })
    },
    openModal() {
      this.leftRoleId = ''
      this.rightRoleId = ''
      this.changeList = []
      this.hasList = []
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
  }
}
</script>

